<template>
	<view class="tjshop" v-if="showList">
		<Tabs :TabList="tabList" :currentTab="checkedTab" @tabs="tabsChange" :lineWidth="250">
			<TabPane v-for="(item, index) in tabList" :key="index">
				<view class="pjBox" v-if="pjlist.length > 0">
					<view class="pjItem" v-for="(item, index) in pjlist" :key="index">
						<view class="pjUser">
							<image :src="item.portrait"></image>
							<view class="usermsg">
								<view class="left">
									<view class="name">{{ item.name }}</view>
									<view class="comment-wrapper">
										<text class="pj__txt">评分</text>
										<view class="xj">
											<view class="xjbox">
												<text
													:class="[`iconfontPT star ${item1 < item.score ? 'iconshoucang-yixuanzhong' : 'iconshoucang-weixuanzhong'}`]"
													v-for="item1 in 5"
													:key="item1"
												></text>
											</view>
										</view>
									</view>
								</view>
								<view class="right">{{ item.time }}</view>
							</view>

							<view class="pjinfo">
								<view class="msg">{{ item.content }}</view>
								<view class="imgBox">
									<view class="imgItem imgBox__singleImage" v-if="item.img.length === 1">
										<image :src="`${qiniuhost}${item.img[0]}-t.m75xx`" mode="aspectFill" @click="$imgPreview(item.img[0], idx, qiniuhost, item.img)"></image>
									</view>
									<view class="imgItem imgBox__multImage" v-else-if="item.img.length > 1" v-for="(i, idx) in item.img" :key="idx">
										<image :src="`${qiniuhost}${i}-t.m75xx`" mode="aspectFill" @click="$imgPreview(i, idx, qiniuhost, item.img)"></image>
									</view>
								</view>
							</view>

							<view class="business-comment" v-if="item.hf_status === 1">
								<text class="business-comment__icon iconfontPT iconshangjiahuiying"></text>
								<text class="business-comment__txt">
									<text class="business-comment__txt--reply">商家回复:</text>
									{{ item.hf_content }}
								</text>
							</view>

							<view class="hf" v-if="item.hf_status == 2">
								<view class="hfbox" @click="handleReply(item.id)">
									<text class="iconfontPT iconshangjiahuiying"></text>
									<text>回复</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<block v-else><noData texts="暂无评价信息"></noData></block>
			</TabPane>
		</Tabs>
		<view v-if="focusstatus" class="input-wrap w100 h100">
			<view class="mask w100 h100" @click="handleReply"></view>
			<view class="form-wrap w100 bg-white">
				<view class="confirm-btn-wrap flex-x-end"><text class="confirm-btn" @click="handleConfirm">回复</text></view>
				<view class="confirm__textarea">
					<textarea class="w100" :auto-focus="focusstatus" type="text" placeholder="请输入回复内容" v-model="hf_content" cursor-spacing="30rpx"></textarea>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { answer, getEvaluate } from '../../../apis/shop/api.js';
import Tabs from '../../components/public/tabs.vue';
import TabPane from '../../components/public/tabPane.vue';
import noData from '../../components/public/no-data.vue';

export default {
	data() {
		return {
			pjlist: [],
			checkedTab: 0,
			tabList: [
				{
					title: '全部',
					state: 'all'
				},
				{
					title: '已回复',
					state: 0
				},
				{
					title: '未回复',
					state: 1
				}
			],
			params: {
				id: ''
			},
			focusstatus: false,
			showList: false
		};
	},
	onLoad() {
		uni.showLoading({
			title: '加载中...',
			mark: true
		});
		this.getList();
	},
	computed: {
		state() {
			let state = 0;
			switch (this.checkedTab) {
				case 0:
					state = '*';
					break;
				case 1:
					state = 1;
					break;
				case 2:
					state = 2;
					break;
			}
			return state;
		},
		host() {
			return this.$baseHost.car;
		},
		qiniuhost() {
			return this.$baseHost.qiniuHost;
		}
	},
	components: {
		Tabs,
		TabPane
	},
	methods: {
		tabsChange(index) {
			this.checkedTab = index;
			this.getList();
		},
		getList() {
			let that = this,
				params = {
					hf_status: this.state,
					store_id: uni.getStorageSync('store_id'),
					token: uni.getStorageSync('token')
				};
			getEvaluate(params).then(res => {
				that.pjlist = res.data.evaluate;
				clearTimeout(that.timeout);
				that.timeout = setTimeout(() => {
					that.showList = true;
					uni.hideLoading();
				}, 500);
			});
		},
		handleReply(id) {
			id && (this.params.id = id);
			this.focusstatus = !this.focusstatus;
		},
		handleConfirm() {
			this.handleReply();

			let params = {
				store_id: uni.getStorageSync('store_id'),
				token: uni.getStorageSync('token'),
				hf_content: this.hf_content,
				id: this.params.id
			};
			answer(params).then(res => {
				uni.showToast({
					title: '回复成功！',
					icon: 'success'
				});
				this.getList();
			});
		}
	}
};
</script>

<style lang="less">
.tjshop {
	padding: 50rpx 0;
}

.pjlev {
	display: flex;

	text {
		flex: 1;
		text-align: center;

		&.active {
			color: #e41805;
		}
	}
}

.input-wrap {
	position: fixed;
	top: 0;
	left: 0;
	padding: 20rpx;
	box-sizing: border-box;

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.form-wrap {
		position: absolute;
		bottom: 0;
		left: 0;

		.confirm__textarea {
			textarea {
				padding: 15rpx;
				box-sizing: border-box;
			}
		}

		.confirm-btn-wrap {
			border-bottom: 1rpx solid rgba(197, 195, 195, 0.5);
			padding: 15rpx;
			margin-bottom: 25rpx;

			.confirm-btn {
				width: 100rpx;
				height: 45rpx;
				text-align: center;
				font-size: 26rpx;
				line-height: 45rpx;
			}
		}
	}
}

.hf {
	padding: 15rpx 0;
	text-align: right;

	&::after {
		content: '';
		display: block;
		height: 0;
		overflow: hidden;
		clear: both;
	}

	.hfbox {
		float: right;
		border: 1rpx solid #ccc;
		border-radius: 15rpx;
		padding: 15rpx 20rpx;
		border-radius: 40rpx;

		text {
			font-size: 28rpx;
			margin: 0 10rpx;
			color: #999;
		}
	}
}

.sjhf {
	border-top: 1rpx solid #ccc;
	padding: 30rpx 0 30rpx 30rpx;
	color: #999999;
	font-size: 26rpx;

	.iconfontPT {
		color: #fcd100;
		margin-right: 20rpx;
	}
}

.xj {
	margin: 18rpx 0;
	width: 100%;

	&::after {
		content: '';
		display: block;
		height: 0;
		overflow: hidden;
		clear: both;
	}

	.xjbox {
		float: left;

		&::after {
			content: '';
			display: block;
			height: 0;
			overflow: hidden;
			clear: both;
		}

		image {
			width: 24rpx;
			height: 24rpx;
			float: left;
			margin-right: 5rpx;
		}
	}

	text {
		float: right;
		font-size: 24rpx;
		color: #666;
	}
}

.pjBox {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 40rpx 0;
}

.pjBox {
	.iconshoucang-yixuanzhong {
		color: #fcd100;
	}

	padding: 40rpx;

	.pjItem {
		.pjUser {
			margin-bottom: 30rpx;

			&::after {
				content: '';
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			& > image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 35rpx;
				float: left;
			}

			.usermsg {
				padding-left: 20rpx;
				width: calc(~'100% - 90rpx');
				float: left;
				display: flex;
				align-items: center;

				.comment-wrapper {
					margin-top: 14rpx;
				}

				&::after {
					content: '';
					display: block;
					height: 0;
					overflow: hidden;
					clear: both;
				}

				.left {
					width: calc(~'100% - 200rpx');

					.name {
						font-size: 26rpx;
						color: #333333;
					}

					& > view {
						&::after {
							content: '';
							display: block;
							height: 0;
							overflow: hidden;
							clear: both;
						}

						.pj__txt {
							font-size: 24rpx;
							float: left;
							color: #999;
						}
					}
				}

				.right {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.pjinfo {
				padding-left: 84rpx;

				.msg {
					font-size: 28rpx;
					color: #333333;
					font-size: 500;
				}

				.imgBox {
					display: flex;
					margin-top: 20rpx;

					&__singleImage {
						width: 340rpx;
						height: 360rpx;

						> image {
							width: 100%;
							height: 100%;
						}
					}

					&__multImage {
						width: 194rpx;
						height: 194rpx;

						margin-right: 10rpx;

						&:last-child {
							margin-right: 0;
						}

						> image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.business-comment {
		border-top: 1px solid rgba(204, 204, 204, 0.5);
		padding: 10rpx 0 30rpx;
		margin-left: 84rpx;
		margin-top: 30rpx;
		font-size: 26rpx;

		&__icon {
			color: #faab20;
			margin-right: 20rpx;
			font-size: 25rpx;
		}

		&__txt {
			color: #333;
			font-size: 26rpx;

			&--reply {
				color: #999;
				margin-right: 10rpx;
			}
		}
	}

	.xj {
		margin-bottom: 10px;
		width: 100%;

		&::after {
			content: '';
			display: block;
			height: 0;
			overflow: hidden;
			clear: both;
		}

		.xjbox {
			float: left;
			margin-left: 15rpx;
			display: flex;
			position: relative;
			top: 4rpx;

			&::after {
				content: '';
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				float: left;
				margin-right: 5rpx;
			}
		}

		text {
			float: right;
			font-size: 24rpx;
			color: #666;

			&.star {
				float: unset;
				font-size: 24rpx;
				color: #fcd100;
				flex: 1;
				margin-right: 8rpx;
			}
		}
	}
}
</style>
